<template>
    <div>
        <!-- 学院管理界面，展示学院图片，名称，以及学院报道 -->
        <el-button type="primary" @click="dialogFormVisible = true" style="margin:10px">新增学院</el-button>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column label="序号" type="index" width="150px"> </el-table-column>
            <el-table-column label="学院名" prop="name"> </el-table-column>
            <el-table-column label="缩略图" prop="img">
                <template slot-scope='scope'>
                    <img :src="scope.row.img" alt="显示图片" style="width:50%;height:50%">
                </template>
            </el-table-column>
            <el-table-column>
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="tanchu(scope.$index,scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handelDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 添加学院弹出层对话框 -->
        <div>
            <el-dialog title="新增学院" :visible.sync="dialogFormVisible">
                <el-form :model="college">
                    <el-form-item label="学院图片地址" :label-width="formLabelWidth">
                        <el-input v-model="college.img" placeholder="请输入在线地址" />
                    </el-form-item>
                    <el-form-item label="学院信息" :label-width="formLabelWidth">
                        <el-input v-model="college.name" placeholder="请输入学院名" />
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addCollege">确 定</el-button>
                </div>
            </el-dialog>
        </div>
        <div>
            <el-dialog title="编辑学院信息" :visible.sync="dialogFormVisible2">
                <el-form :model="college">
                    <el-form-item label="学院图片地址" :label-width="formLabelWidth">
                        <el-input v-model="college.img" placeholder="请输入在线地址" />
                    </el-form-item>
                    <el-form-item label="学院信息" :label-width="formLabelWidth">
                        <el-input v-model="college.name" placeholder="请输入学院名" />
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible2 = false">取 消</el-button>
                    <el-button type="primary" @click="handelUpdate">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            tableData: [],
            college: {
                id:'',
                img: '',
                name: ''
            },
            dialogFormVisible:false,
            dialogFormVisible2:false,
            currentPage: 1,
            pageSize: 10,
        };
    },
    methods: {
        // 加载全部学院数据
        async collegeList() {
            const res = await this.getJSON(`/college/findall`);
            this.tableData = res.data.records;
        },
        async addCollege(){
            await this.postJSON(`/college/addcollege`,this.college);
            this.dialogFormVisible=false;
            this.collegeList();

        },
        async handelDelete(index,row){
            await this.deleteJSON(`/college/deletebyid?id=${row.id}`);
            this.collegeList();
            this.$message.info('删除成功');
        },
        async handelUpdate(index,row){
            const res = await this.putJSON(`/college/updatebyid`,this.college);
            this.dialogFormVisible2=false;
            this.$message.success('修改成功');
            this.collegeList();
        },
        tanchu(index,row){
            // 编辑弹出框
            this.dialogFormVisible2=true;
            // 赋值给表单
            this.college=row;
        }
    },
    created() {
        this.collegeList();
    }
};
</script>
<style scoped></style>
